<template>
  <div class="progress-renderer">
    <span class="progress-text">{{ progressValue }}%</span>
    <div class="progress-bar">
      <div 
        class="progress-fill"
        :style="{ width: progressValue + '%' }"
      ></div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'

export default {
  name: 'ProgressRenderer',
  props: {
    value: {
      type: [Number, String],
      default: 0
    }
  },
  setup(props) {
    const progressValue = computed(() => {
      const value = Number(props.value) || 0
      return Math.max(0, Math.min(100, value))
    })
    
    return {
      progressValue
    }
  }
}
</script>

<style scoped>
.progress-renderer {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.progress-text {
  font-size: 12px;
  color: #606266;
  min-width: 30px;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background-color: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #409EFF;
  border-radius: 3px;
  transition: width 0.3s ease;
}
</style> 